<template>

  <div id="rightList">

    <el-row class="handleBtn">
      <el-button type="primary" icon="el-icon-circle-plus-outline" round @click.native="openAddRight" size="mini">新增权限</el-button>
    </el-row>

    <div style="text-align:left;">
      <!-- 父权限列表 -->
      <el-table
        :data="rightDataList"
        style="width: 100%"
      >

        <!-- 列表的首列拓展 -->
        <el-table-column type="expand">

          <!-- 子权限列表模板 -->
          <template slot-scope="props">
            <!-- 子权限列表 start -->
            <el-table
              :data="props.row.childrenList"
              style="width: 100%" :show-header="false" border>
              <el-table-column
                label="权限名称"
                prop="sysRightName"
                align="center">
              </el-table-column>
              <el-table-column
                label="权限地址"
                prop="sysRightUrl"
                align="center">
              </el-table-column>
              <el-table-column
                label="权限标识"
                prop="sysRightPermission"
                align="center">
              </el-table-column>
              <el-table-column
                label="权限类型"
                prop="sysRightType"
                :formatter="formatSysRightType"
                align="center">
              </el-table-column>
              <el-table-column
                label="权限状态"
                prop="isEnabled"
                :formatter="formatSysRightIsEnabled"
                align="center">
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                align="center">
                <template slot-scope="scope">
                  <el-button type="success" icon="el-icon-edit" round @click.native="openUpdateRight(scope.row)" size="mini">修改
                  </el-button>
                  <el-button type="danger" icon="el-icon-delete" round @click.native="deleteRight(scope.row)" size="mini">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 子权限列表 end -->
          </template>

        </el-table-column>

        <el-table-column
          label="权限名称"
          prop="sysRightName"
          align="center">
        </el-table-column>
        <el-table-column
          label="权限地址"
          prop="sysRightUrl"
          align="center">
        </el-table-column>
        <el-table-column
          label="权限标识"
          prop="sysRightPermission"
          align="center">
        </el-table-column>
        <el-table-column
          label="权限类型"
          prop="sysRightType"
          :formatter="formatSysRightType"
          align="center">
        </el-table-column>
        <el-table-column
          label="权限状态"
          prop="isEnabled"
          :formatter="formatSysRightIsEnabled"
          align="center">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-edit" round @click.native="openUpdateRight(scope.row)" size="mini">
              修改
            </el-button>
            <el-button type="danger" icon="el-icon-delete" round @click.native="deleteRight(scope.row)" size="mini">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增权限表单窗口 -->

    <!-- 新增-权限弹窗 -->
    <el-dialog title="权限信息" :visible.sync="addRightDialog">
      <el-form :model="addRightForm" ref="addRightForm" label-position="left">
        <el-form-item label="权限名称" :label-width="formLabelWidth" prop="sysRightName"
                      :rules="{required: true, message: '权限名称不能为空', trigger: 'blur'}">
          <el-input v-model="addRightForm.sysRightName" autocomplete="off" placeholder="权限名称"></el-input>
        </el-form-item>
        <el-form-item label="上级权限" :label-width="formLabelWidth" prop="sysRightParentId"
                      :rules="{required: true, message: '上级权限不能为空', trigger: 'blur'}">
          <el-select v-model="addRightForm.sysRightParentId" placeholder="请选择上级权限">
            <el-option
              v-for="item in parentRightList"
              :key="item.sysRightId"
              :label="item.sysRightName"
              :value="item.sysRightId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限标识" :label-width="formLabelWidth">
          <el-input v-model="addRightForm.sysRightPermission" autocomplete="off"
                    placeholder="权限标识"></el-input>
        </el-form-item>
        <el-form-item label="权限地址" :label-width="formLabelWidth">
          <el-input v-model="addRightForm.sysRightUrl" autocomplete="off"
                    placeholder="权限地址"></el-input>
        </el-form-item>
        <el-form-item label="权限类型" :label-width="formLabelWidth" prop="sysRightType"
                      :rules="{required: true, message: '权限类型不能为空', trigger: 'blur'}">
          <el-select v-model="addRightForm.sysRightType" placeholder="请选择权限类型">
            <el-option
              v-for="item in rightTypeList"
              :key="item.value"
              :label="item.msg"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否可用" :label-width="formLabelWidth" prop="isEnabled"
                      :rules="{required: true, message: '权限状态不能为空', trigger: 'blur'}">
          <el-radio-group v-model="addRightForm.isEnabled">
            <el-radio :label="'1'">可用</el-radio>
            <el-radio :label="'2'">禁止</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限序号" :label-width="formLabelWidth">
          <el-input v-model="addRightForm.sysRightSort" autocomplete="off" placeholder="权限序号"></el-input>
        </el-form-item>
        <el-form-item label="权限备注" :label-width="formLabelWidth">
          <el-input v-model="addRightForm.sysRightRemark" autocomplete="off" placeholder="权限备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addRightDialog = false">取 消</el-button>
        <el-button type="primary" @click="addRight('addRightForm')">确 定</el-button>
      </div>
    </el-dialog>


    <!-- 修改-权限弹窗 -->
    <el-dialog title="权限信息" :visible.sync="updateRightDialog">
      <el-form :model="updateRightForm" ref="updateRightForm" label-position="left">
        <el-form-item label="权限名称" :label-width="formLabelWidth" prop="sysRightName"
                      :rules="{required: true, message: '权限名称不能为空', trigger: 'blur'}">
          <el-input v-model="updateRightForm.sysRightName" autocomplete="off" placeholder="权限名称"></el-input>
        </el-form-item>
        <el-form-item label="上级权限" :label-width="formLabelWidth">
          <el-select v-model="updateRightForm.sysRightParentId" placeholder="请选择上级权限" disabled>
            <el-option
              v-for="item in parentRightList"
              :key="item.sysRightId"
              :label="item.sysRightName"
              :value="item.sysRightId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限标识" :label-width="formLabelWidth">
          <el-input v-model="updateRightForm.sysRightPermission" autocomplete="off"
                    placeholder="权限标识"></el-input>
        </el-form-item>
        <el-form-item label="权限地址" :label-width="formLabelWidth">
          <el-input v-model="updateRightForm.sysRightUrl" autocomplete="off"
                    placeholder="权限地址"></el-input>
        </el-form-item>
        <el-form-item label="权限类型" :label-width="formLabelWidth" prop="sysRightType"
                      :rules="{required: true, message: '权限类型不能为空', trigger: 'blur'}">
          <el-select v-model="updateRightForm.sysRightType" placeholder="请选择权限类型">
            <el-option
              v-for="item in rightTypeList"
              :key="item.value"
              :label="item.msg"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否可用" :label-width="formLabelWidth" prop="isEnabled"
                      :rules="{required: true, message: '权限状态不能为空', trigger: 'blur'}">
          <el-radio-group v-model="updateRightForm.isEnabled">
            <el-radio :label="'1'">可用</el-radio>
            <el-radio :label="'2'">禁止</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限序号" :label-width="formLabelWidth">
          <el-input v-model="updateRightForm.sysRightSort" autocomplete="off" placeholder="权限序号"></el-input>
        </el-form-item>
        <el-form-item label="权限备注" :label-width="formLabelWidth">
          <el-input v-model="updateRightForm.sysRightRemark" autocomplete="off" placeholder="权限备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateRightDialog = false">取 消</el-button>
        <el-button type="primary" @click="updateRight('updateRightForm')">确 定</el-button>
      </div>
    </el-dialog>

  </div>


</template>


<script>
  
  import api from "@/assets/js/system/right_list.js";
  import common from "@/assets/js/common/common.js";

  export default{
    data(){
      return {
        rightDataList: [], //权限数据列表
        parentRightList: [], //所有父级权限列表
        addRightDialog: false, //控制新增权限窗口
        formLabelWidth: '120px', //全部form宽度
        //权限类型列表
        rightTypeList: [
          {
            value: "1",
            msg: "菜单"
          },
          {
            value: "2",
            msg: "按钮"
          }
        ],
        //新增权限表单
        addRightForm: {
          sysRightName: "",
          sysRightParentId: null,
          sysRightUrl: "",
          sysRightPermission: "",
          sysRightType: null,
          isEnabled: null,
          sysRightSort: null,
          sysRightRemark: ""
        },
        updateRightDialog: false,//控制修改权限窗口
        //修改权限表单
        updateRightForm: {
          sysRightId: null,
          sysRightName: "",
          sysRightParentId: null,
          sysRightUrl: "",
          sysRightPermission: "",
          sysRightType: null,
          isEnabled: null,
          sysRightSort: null,
          sysRightRemark: ""
        }
      }
    },
    mounted: function () {
      //需要执行的方法可以在mounted中进行触发，其获取的数据可以赋到data中后，可以放在前面进行渲染
      this.getRightList({});//获取权限分页列表
      this.getParentRightList();//获取所有父级权限列表
    },
    methods: {
      /**
       * 获取权限分页列表
       * */
      getRightList(param){
        api.getRightList(param).then((res) => {
          if (res.data == null) {
            this.rightDataList = null;
            return;
          }
          this.rightDataList = res.data;
          //重置表单数据
//          this.addRightForm = {};
        });
      },
      /**
       * 根据列表的数据转换权限类型
       * */
      formatSysRightType(row){
        var msg = "";
        switch (row.sysRightType) {
          case "1":
            msg = "菜单";
            break;
          case "2":
            msg = "按钮";
            break;
          default:
            break;
        }
        return msg;
      },
      /**
       * 根据列表的数据转换权限状态
       * */
      formatSysRightIsEnabled(row){
        var msg = "";
        switch (row.isEnabled) {
          case "1":
            msg = "可用";
            break;
          case "2":
            msg = "禁止";
            break;
          default:
            break;
        }
        return msg;
      },
      /**
       * 重置权限列表
       * */
      resetRightList(){
        this.getRightList({});
      },
      /**
       * 打开新增权限窗口
       * */
      openAddRight(){
        this.addRightForm = {};
        this.addRightDialog = true;
      },
      /**
       * 获取所有父级权限列表
       * */
      getParentRightList(){
        api.getParentRightList({}).then((res) => {
          this.parentRightList = res.data;
        });
      },
      /**
       * 新增权限
       * */
      addRight(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            api.addRight(this.addRightForm).then((res) => {
              common.generalMessage(res); //提示框信息
              this.addRightDialog = false; //关闭弹窗
              if (res.code == 200) {
                this.resetRightList();//重置当前权限列表
                this.getParentRightList();//重置父级权限列表
              }
            });
          } else {
            return false;
          }
        });
      },
      /**
       * 打开编辑权限窗口
       * */
      openUpdateRight(row){
        api.find({
          sysRightId: row.sysRightId
        }).then((res) => {
          this.updateRightForm = res.data;
          if (this.updateRightForm.sysRightParentId == null || this.updateRightForm.sysRightParentId == "") {
            this.updateRightForm.sysRightParentId = "0";
          }
          this.updateRightDialog = true; //打开弹窗
        });
      },
      /**
       * 修改权限
       * */
      updateRight(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            api.updateRight(this.updateRightForm).then((res) => {
              common.generalMessage(res); //提示框信息
              this.updateRightDialog = false; //关闭弹窗
              if (res.code == 200) {
                this.resetRightList();//重置当前权限列表
                this.getParentRightList();//重置父级权限列表
              }
            });
          } else {
            return false;
          }
        });
      },
      /**
       * 删除权限
       * */
      deleteRight(row){
        this.$confirm("确认是否删除权限【" + row.sysRightName + "】", "是否继续?", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.deleteRight({
            id: row.sysRightId
          }).then((res) => {
            common.generalMessage(res);
            if (res.code == 200) {
              this.resetRightList();//重置当前权限列表
              this.getParentRightList();//重置父级权限列表
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      }
    }
  }
</script>

<style lang="scss">
  #rightList{
    .el-button--primary{
      border-radius:3px;
      background-color: #086dfb;
    }
    .el-button--success{
      border-radius:3px;
      background-color: #2bc792;
    }
    .el-button--danger{
      border-radius:3px;
      background-color: #fc8282;
    }
    margin:30px;

    .el-table__expanded-cell[class*=cell]{
      padding:20px 0 20px 48px;
    }
    .handleBtn{
      background-color: white;
      padding:15px 20px;
      text-align: left;

    }
    .el-select{
      width:100%;
    }
  }


</style>


